'use client'

import { useEffect, useState } from "react";

function useMouse(){
   const [state,setstate]=useState({
    clientX:0,
    clientY:0,
    pageX:0,
    pageY:0,
    screenX:0,
    screenY:0
   })
  useEffect(()=>{
    const handleMouseMove=(e:MouseEvent)=>{
      const {clientX, clientY, pageX, pageY, screenX, screenY}=e
      setstate({
        clientX,
        clientY,
        pageX,
        pageY,
        screenX,
        screenY,
      })
    }
    window.addEventListener('mousemove',handleMouseMove)
    return()=>{
      window.removeEventListener('mousemove',handleMouseMove)
    }

  },[]) 
  return state
}

export default function Home() {
  const{clientX, clientY, pageX, pageY, screenX, screenY}=useMouse()
  return (
    <div>
      <p>
        Client - x:{clientX},y:{clientY}
      </p>
      <p>
        Page - x:{pageX},y:{pageY}
      </p>
      <p>
        Screen -x:{screenX},y:{screenY}
      </p>
    </div>
  );
}
